<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		<meta name="viewport" content="width=deice-width,initial-scale=1.0"/>
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			#bg {
				width: 100%;
				height: 100%;
				font-size: 14px;
			}
		</style>
	</head>
	<body>
		<canvas id="bg"></canvas>
		<script type="text/javascript">
			//获取canvas元素
			const cvs = document.getElementById('bg');
			// 获取窗口尺寸
			const width = window.innerWidth,
				height = window.innerHeight;
			
			// 获取绘制上下文
			const ctx = cvs.getContext("2d");
			
			//列宽
			const columnWidht = 20;
			//列数
			const columnCount = Math.floor(window.innerWidth / columnWidht); //列数
			//记录每列写道第几个文字
			const columnNextIndexs = new Array(columnCount);
			columnNextIndexs.fill(1);
			
			//绘制
			function draw() {
				//刷颜色
				ctx.fillStyle = 'rgba(240,240,240,0.1)'
				ctx.fillRect(0,0,width,height)
				
				
				const fz = 10;
				ctx.fillStyle = getRandomColor();
				ctx.font = `${fz}px "Roboto Mono"`;
				for(let i = 0;i<columnCount;i++){
					const x = i * columnWidht;
					const y = fz * columnNextIndexs[i]
					ctx.fillText(getRandomChar(),x,y)
					if(y > height && Math.random() > 0.99){
						columnNextIndexs[i] = 0;
					}else{
						columnNextIndexs[i]++;
					}
				}
			}
			
			//随机颜色
			function getRandomColor(){
				const fontColors = [
					'#33B5E5',
					'#0099CC',
					'#AA66CC',
					'#000000',
					'#CC99CC',
					'#008855',
					'#00DD44',
					'#663366'
				];
				return fontColors[Math.floor(Math.random() * fontColors.length)]
			}
			//随机文字
			function getRandomChar(){
				const str = 'console.log("hello world")';
				return str[Math.floor(Math.random() * str.length)]
			}
			draw();
			setInterval(draw,40)
		</script>
	</body>
</html>
